<template>
	<div class="wrap">
		<div class="logo">
		<!--logo部分-->
		<div class="logo-left">
			<img src="../../assets/img/shouye/logo.png"/>
		</div>
		<!--搜索框-->
		<div class="sousuo">
			<img src="../../assets/img/shouye/libaifive.png"/>
			<input type="text" name="ss" id="ss" placeholder="请输入关键字进行搜索" />
			<div class="remen">
			<span>热门:</span>
			<span>奇异果</span>
			<span>牛排</span>
			<span>山竹</span>
			<span>牛油果</span>
			</div>
		</div>
		<!--个人中心-->
		<div class="geren">
			<span><img src="../../assets/img/shouye/grzx.png"/>个人中心</span>
		</div>
		<!--购物车-->
		<div class="gouwu">
			<span><img src="../../assets/img/shouye/gouwuche.png"/>购物车</span>
		</div>
		
		</div>
	</div>
</template>

<script>
	
</script>

<style scoped="scoped">
	.wrap{
		width: 100%;
		height: 130px;
		display: flex;
		justify-content: center;
		/*margin-top: 36px;*/
	}
	.logo{
		width: 1280px;
		height: 130px;
		display: flex;
		align-items: center;
	}
	.logo-left img{
		width: 370px;
		height: 67px;
		margin-top: -20px;
	}
	.sousuo{
		position: relative;
		width: 600px;
		height: 40px;
	}
	.sousuo img{
		position: absolute;
		left: 102px;
		top: 0;
		width: 498px;
		height: 40px;
	}
	.remen{
		position: absolute;
		left: 102px;
		top: 43px;
	}
	.sousuo span{
		padding-right: 10px;
	}
	#ss{
		position: absolute;
		left: 104px;
		top: 2px;
		text-indent: 1em;
		width: 456px;
		height: 36px;
	}
	.geren{
		margin-left: 40px;
		width: 125px;
		height: 40px;
		display: flex;
		align-items: center;
		background: #e5e5e5;
		border: 1px solid darkgray;
	}
	.gouwu{
		margin-left: 20px;
		width: 125px;
		height: 40px;
		display: flex;
		align-items: center;
		background: #e5e5e5;
		border: 1px solid darkgray;
	}
	.geren span,.gouwu span{
		display: flex;
		align-items: center;
		margin-left: 9px;
	}
	.geren span img,.gouwu span img{
		padding: 12px;
	}
</style>